<!-- 未整改 10
待验收 5 -->
<template>
  <eagle-list
    showTab
    allowSearch
    placeholder="请输入器材名称搜索"
    :tabData="tabData"
    @bindData="bindData"
    @initActive="_initActive"
    ref="eaglelist"
  >
    <div v-if="this.active === 0">
      <div>
        <eagle-cell
          style="margin-top: 10px; border-radius: 8px"
          v-for="(item, index) in list"
          :key="index"
          class="card"
        >
          <div @click="goDetail(item)">
            <div class="warn_header">
              <eagle-tag
                v-if="item.ExpireDays < 0"
                class="warn_tag"
                type="primary"
                >剩{{ Math.abs(item.ExpireDays) }}天</eagle-tag
              >
              <eagle-tag
                v-if="item.ExpireDays > 0"
                class="warn_tag"
                type="danger"
                >逾期{{ Math.abs(item.ExpireDays) }}天</eagle-tag
              >
              <div>{{ index + 1 }}、{{ item.TypeName }}</div>
            </div>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_type.png"
                  alt=""
                />器材编号：{{ item.No }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_org.png"
                  alt=""
                />所属部门：{{ item.OrgName }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_area.png"
                  alt=""
                />位置：{{ item.Location }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />最近点检日期：{{ gettimeS(item.CheckDay) }}
              </eagle-col>
            </eagle-row>
            <eagle-row gutter="20" class="dep_sort">
              <eagle-col span="24">
                <img
                  style="vertical-align: middle"
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />下次点检日期：{{ gettimeS(item.NextCheckDay) }}
              </eagle-col>
            </eagle-row>
            <eagle-divider />
            <eagle-button
              class="ml-10 mt-10"
              style="float: right; height: 30px"
              size="small"
              type="default"
              @click.stop="del(item)"
              >删除
            </eagle-button>
            <!-- <eagle-button
                class="ml-10 mt-10"
                style="float: right;height:30px;"
                size="small"
                type="default"
                @click.stop="edit(item)"
                >编辑
              </eagle-button> -->
          </div>
        </eagle-cell>
      </div>
    </div>
    <div v-if="this.active === 1">
      <div>
        <eagle-cell
          style="margin-top: 10px; border-radius: 8px"
          v-for="(item, index) in list"
          :key="index"
          class="card"
        >
          <div class="warn_item">
            <div class="warn_header">
              <eagle-tag
                class="warn_tag"
                v-if="item.Status == 10"
                size="mini"
                type="danger"
                >未整改</eagle-tag
              >
              <eagle-tag
                class="warn_tag"
                v-if="item.Status == 100"
                size="mini"
                type="primary"
                >已整改</eagle-tag
              >
            </div>
            <div @click="siteDetail(item)">
              <div class="warn_header">
                <div>{{ index + 1 }}、{{ item.TypeName }}</div>
              </div>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    style="vertical-align: middle"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                    alt=""
                  />器材编号：{{ item.No }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    style="vertical-align: middle"
                    src="@/assets/Images/AppIcon/icon_list_org.png"
                    alt=""
                  />所属部门：{{ item.OrgName }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    style="vertical-align: middle"
                    src="@/assets/Images/AppIcon/icon_list_area.png"
                    alt=""
                  />位置：{{ item.Location }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    style="vertical-align: middle"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                    alt=""
                  />点检条目：{{ item.CheckListDetailItem }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <img
                    style="vertical-align: middle"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                    alt=""
                  />隐患描述：{{ item.HiddenDangerDesc }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="24">
                  <van-field label="隐患图片" readonly>
                    <template #input>
                      <eagle-image-preview :images="item.Attachs">
                      </eagle-image-preview>
                    </template>
                  </van-field>
                </eagle-col>
              </eagle-row>
              <eagle-divider />
              <eagle-button
                class="ml-10 mb-10"
                style="float: right; height: 30px"
                size="small"
                type="default"
                v-if="item.CorrectiveUserName==user.UserName && (item.Status == 10 ||item.Status ==5 )"
                @click.stop="siteCheck(item)"
                >整改
              </eagle-button>
              <eagle-button
                class="ml-10 mb-10"
                style="float: right; height: 30px"
                size="small"
                type="default"
                v-if="item.Status == 5 && item.CreateUserNamey
                 == user.UserName"
                @click.stop="siteVertify(item)"
                >验收
              </eagle-button>
              <!-- <eagle-button
                class="ml-10 mt-10"
                style="float: right;height:30px;"
                size="small"
                type="default"
                @click.stop="siteDetail(item)"
                >详情
              </eagle-button> -->
            </div>
          </div>
        </eagle-cell>
      </div>
    </div>
    <!-- 弹出层 -->
    <eagle-dialog
      title="整改"
      v-model="showCheck"
      titlePosition="center"
      @close="cancle"
      @confirm="confirm"
    >
      <eagle-input
        label="整改图片："
        name="uploader"
        v-model="VerifyAttachs"
        :key="ImgKey"
        ref="upload"
      >
        <template #input>
          <eagle-image-uploader
            :images.sync="VerifyAttachs"
          ></eagle-image-uploader>
        </template>
      </eagle-input>
      <eagle-input
        label="整改说明"
        name="name"
        v-model="VerifyRemarks"
        placeholder="请输入"
        isInputText
        type="textarea"
        autosize
        row="3"
      ></eagle-input>
    </eagle-dialog>

    <eagle-dialog
      title="验收"
      v-model="showVertify"
      titlePosition="center"
      @close="cancle"
      @confirm="confirmVertify"
    >
      <eagle-radio-group
        name="radio"
        label="是否整改完成"
        v-model="Verify"
        direction="horizontal"
        required
      >
        <eagle-radio name="100">
          <span style="font-size: 14px">是</span>
        </eagle-radio>
        <eagle-radio name=-5>
          <span style="font-size: 14px">否</span>
        </eagle-radio>
      </eagle-radio-group>
    </eagle-dialog>
  </eagle-list>
</template>

<script>
import { GetPageData, getDetail } from "@/api/siteFireEquipment";
import test from "../../../components/select/test.vue";
import { getDate, getDateDiffs } from "@/utils/getDate.js";
import store from "@/store/index";
import { mapGetters } from "vuex";
import FileListReadOnly from "../../../components/Attach/FileListReadOnly.vue";
import { List } from "vant";
import { getUserInfo } from "@/api/base";
export default {
  computed: {
    ...mapGetters(["baseUrl", "CompanyCode"]),
  },
  components: { test, FileListReadOnly },
  data() {
    return {

      showCheck: false,
      showVertify: false,
      IDS: "",
      VerifyRemarks: "",
      VerifyAttachs: "",
      Verify:"",
      ImgKey: "",
      active: 0,
      list: [],
      tabData: [
        {
          title: "消防器材清单",
          url: "/SiteFireEquipment/GetPageData",
          isPage: true,
          params: {
            dataType: "List",
          },
        },
        {
          title: "点检异常清单",
          url: "/SiteCheckTask/GetPageData",
          isPage: true,
          params: {
            dataType: "DangerList",
          },
        },
      ],
      user: {},
    };
  },
  created() {
    if (this.active == "0") {
      this.url = "/SiteFireEquipment/GetPageData";
    } else if (this.active == "1") {
      this.url = "/SiteCheckTask/GetPageData";
    }
    // this.getList();
    if (
      process.env.VUE_APP_PLANTFORM &&
      process.env.VUE_APP_PLANTFORM == "CY"
    ) {
      store.state.title = "专项检查";
      this.tabData[0].title = "专项清单";
    }
    getUserInfo()
      .then((res) => {
        this.user = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    _initActive(active) {
      if (active === 0) {
        this.$refs.eaglelist.changefilterTab(true);
      }
      if (active === 1) {
        this.$refs.eaglelist.changefilterTab(false);
      }
      this.active = active;
    },
    bindData(data) {
      this.list = data;
    },
    gettimeS(data) {
      return getDate(data);
    },
    del(item) {
      const that = this;
      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要删除该条记录吗？",
        })
        .then(() => {
          that.$axios
            .get("/SiteFireEquipment/Delete", { params: { id: item.ID } })
            .then((res) => {
              that.$toast.success("删除成功！");
              setTimeout(() => {
                that.$refs.eaglelist.getList();
              }, 300);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    goDetail(item) {
      this.$router.push({
        path: "/SiteFireEquipmentDetail",
        query: { code: item.Code },
      });
    },
    siteCheck(item) {
      this.IDS = item.ID;
      this.showCheck = true;
    },
    siteVertify(item) {
      this.IDS = item.ID;
      this.showVertify = true;
    },
    confirm() {
      let params = {
        IDS: this.IDS,
        VerifyAttachs: this.VerifyAttachs,
        VerifyRemarks: this.VerifyRemarks,
      };
      let _this = this;
      _this.$axios.post("/SiteCheckTask/ConfirmVerify", params).then((res) => {
        _this.$toast.success("保存成功");
        _this.showCheck = false;
        setTimeout(() => {
          _this.$refs.eaglelist.getList();
        }, 300);
      });
    },
    confirmVertify(){
      let params ={
        IDS:this.IDS,
        Status:this.Verify
      };
      let _this = this;
      _this.$axios.post("/SiteCheckTask/AcceptanceCheck", params).then((res) => {
        _this.$toast.success("保存成功");
        _this.showVertify = false;
        setTimeout(() => {
          _this.$refs.eaglelist.getList();
        }, 300);
      });
    
    },
    cancle() {
      //this.ImgKey = "";
      this.VerifyAttachs = "";
      this.VerifyRemarks = "";
      this.showCheck = false;
      this.showVertify=false;
    },
    siteDetail(item) {
      this.$router.push({
        path: "/SiteFireEquipmentCheck",
        query: { ctCode: item.CTCode, objCode: item.Code },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .eagle-field__control {
      background-color: #ffffff !important;
    }
  }
}
.all_dep {
  background-color: #ffffff;
}
.eagle-cell {
  padding: 0px 0px;
  .info_tag {
    position: absolute;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    top: 0;
    right: 0;
  }
}
.warn_item {
  margin: 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.card_check {
  border-radius: 8px;
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  width: 30%;
  float: right;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
</style>
